<script setup lang="jsx">
import { ref } from 'vue';
import { planplatinglist } from '@/service/api/modules/plan';
import Modal from '@/components/common/modal.vue';
import Search from './modules/search.vue';

const searchParams = ref({
  prodNo: null,
  time: null
});

const oldColumns = [
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '名称',
    fixed: 'left',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

const oldData = [
  {
    dateTime: '树脂塞孔可生产',
    uid: 1
  },
  {
    dateTime: '黑影可生产',
    uid: 2
  },
  {
    dateTime: '大于等于成品2安铜',
    uid: 3
  },
  {
    dateTime: '成品厚度小于等于0.5MM',
    uid: 4
  }
];

const columns = ref([...oldColumns]);
const tableData = ref([...oldData]);

console.log('tableData.value :>> ', tableData.value);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);

function getData() {
  const params = {
    prodNo: searchParams.value.prodNo
  };
  if (searchParams.value.time?.[0]) {
    params.startTime = searchParams.value.time[0];
    params.endTime = searchParams.value.time[1];
  } else {
    window.$message.error('请选择计划回复交期');
    return;
  }
  loading.value = true;
  planplatinglist({
    ...params
  })
    .then(({ data, error }) => {
      if (!error) {
        const arr = [];
        const keys = {
          0: 'szsk',
          1: 'hy',
          2: 'cpat',
          3: 'cphd'
        };
        data.forEach((item, index) => {
          arr.push({
            key: `key${index}`,
            dataIndex: `key${index}`,
            title: item.dateTime,
            width: 200,
            align: 'center',
            checked: true,
            ellipsis: true
          });
          tableData.value.forEach((i, idex) => {
            i[`key${index}`] = item[keys[idex]];
          });
        });

        columns.value = [...oldColumns, ...arr];

        // tableData.value = data;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

// getData();

function search() {
  getData();
}

const detailsVisible = ref(false);
const detailsList = ref({});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="search()" @search="search()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <!--
 <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="add('add')">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">新增</span>
        </AButton>
-->
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="uid"
        :default-expand-all-rows="true"
        :scroll="{ y: 'auto' }"
        class="h-full"
        :row-height="23"
      />
    </ACard>

    <Modal
      v-model:visible="detailsVisible"
      :destroy-on-close="true"
      :centered="true"
      title="操作日志详细"
      width="750px"
      height="550px"
    >
      <div>
        <ADescriptions title="">
          <ADescriptionsItem :span="2" label="操作模块:">{{ detailsList.title }}</ADescriptionsItem>
          <ADescriptionsItem :span="2" label="请求地址：">{{ detailsList.operIp }}</ADescriptionsItem>
          <ADescriptionsItem :span="2" label="登录信息:">
            {{ detailsList.operName }}/{{ detailsList.operIp }}
          </ADescriptionsItem>
          <ADescriptionsItem :span="2" label="请求方式：">{{ detailsList.requestMethod }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="操作方法：">{{ detailsList.method }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="请求参数：">{{ detailsList.operParam }}</ADescriptionsItem>
          <ADescriptionsItem :span="3" label="返回参数：">{{ detailsList.jsonResult }}</ADescriptionsItem>
          <ADescriptionsItem label="操作状态：">{{ detailsList.status == 0 ? '成功' : '失败' }}</ADescriptionsItem>
          <ADescriptionsItem label="消耗时间：">{{ detailsList.costTime + '毫秒' }}</ADescriptionsItem>
          <ADescriptionsItem label="操作时间：">{{ detailsList.operTime }}</ADescriptionsItem>
        </ADescriptions>
      </div>

      <template #footer>
        <div class="modal-footer">
          <AButton @click="detailsVisible = false">关闭</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>

<style></style>
